<template>
  <Card title="监控点">
    <div
      class="list"
      :class="{
        'list--double': doubleRow,
      }"
    >
      <div v-for="item of monitoringList" :key="item.id" class="list-item">
        <div class="item">
          <JkVideo :id="item.id"></JkVideo>
          <p class="item-title">视频</p>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
import { defineComponent } from "vue";
import JkVideo from "@/components/JkVideo/v2";
import Card from "./Card.vue";

export default defineComponent({
  name: "MonitoringPoints",
  components: {
    Card,
    JkVideo,
  },
  props: {
    doubleRow: {
      type: Boolean,
      default: true,
    },
    monitoringList: {
      type: Array,
      default: [
        {
          url: "111",
          id: "123123",
        },
        {
          url: "111",
          id: "123123",
        },
        {
          url: "111",
          id: "123123",
        },
        {
          url: "111",
          id: "123123",
        },
      ],
    },
  },
  computed: {
    num() {
      return this.doubleRow ? 4 : 3;
    },
  },
  methods: {
    handleVideoClick() {
      const { origin } = location;
      UI.ShowWindow(
        WINDOW_TYPE.CENTER_MIDDLE_WINDOW,
        origin + "/controls/video-play/index.html?id=1&videoSrc=123",
        { draggbale: true }
      );
    },
  },
});
</script>

<style lang="scss" scoped>
.list {
  margin: -4px;
  overflow: hidden;
  font-size: 0;

  &-item {
    float: left;
    width: 33.333%;
    padding: 4px;
  }

  &--double {
    .list-item {
      width: 50%;
    }
  }
}

.item {
  font-size: 0;

  &-video {
    width: 100%;
    height: 100px;
    object-fit: fill;
    background-color: #000;
    transition: 0.25s;

    &__container {
      overflow: hidden;
      cursor: pointer;

      &:hover {
        .item-video {
          transform: scale(1.1);
        }
      }
    }
  }

  &-title {
    padding: 1px 6px;
    font-size: 14px;
    font-family: cn;
    background-color: rgb(255 255 255 / 20%);
  }
}
</style>
